<template>
    <div class="rn-card box-card-style-default" :class="{ 'card-list-view': blogPostStyle === 'list' }">
        <div class="inner">
            <div style="flex-basis: 30%" class="blogTwo_left">
                <!-- <router-link class="image" :to="`/blog-details/${blog.id}`">
                    <img class="w-100" :src="blog.img" :alt="blog.title">
                </router-link> -->
                <div class="blogTwo_left_yuan">
                    <img src="../../assets/images/blog/blog-3.png" style="width: 54px;height: 50px;">

                </div>
            </div>
            <div class="content" style="flex-basis: 70%">
                <ul v-if="blogPostStyle === 'card'" class="rn-meta-list">
                    <li>
                        <!-- <router-link :to="''">
                            {{ blog.author }}
                        </router-link> -->
                        {{ blog.author }}

                    </li>


                </ul>
                <h4 class="title">
                    <!-- <router-link :to="`/blog-details/${blog.id}`">
                        {{ blog.title }}
                    </router-link> -->
                    {{ blog.title }}

                </h4>
                <ul v-if="blogPostStyle === 'list'" class="rn-meta-list">
                    <li>
                        <!-- <router-link :to="''">
                            {{ blog.author }}
                        </router-link> -->
                        {{ blog.author }}

                    </li>
                    <!-- <li class="separator">/</li> -->
                    <li>{{ blog.publishedAt }}</li>
                </ul>

                <p v-if="blogPostStyle === 'list'" class="descriptiion">
                    {{ blog.excerpt }}
                </p>
                <div class="beixuan row" style="flex-basis: 100%">
                    <!-- 备选项 -->
                    <el-radio v-model="radio2" label="1" border size="medium" class="col-3">首次送100次</el-radio>
                    <el-radio v-model="radio2" label="2" border size="medium" class="col-3">1000次</el-radio>
                    <el-radio v-model="radio2" label="3" border size="medium" class="col-3">6000次</el-radio>
                    <el-radio v-model="radio2" label="4" border size="medium" class="col-3">14000次</el-radio>
                    <el-radio v-model="radio2" label="5" border size="medium" class="col-3">24000次</el-radio>
                    <el-radio v-model="radio2" label="6" border size="medium" class="col-3">42000次</el-radio>

                </div>
                <p class="title">
                   <span style="font-size: 12px;">￥</span>
                   <span style="color: #F0483D;font-size: 26px;" v-show="this.radio2==1">
                    {{ blog.price }}
                   </span>
                   <span style="color: #F0483D;font-size: 26px;" v-show="this.radio2==2">
                    {{ blog.price2 }}
                   </span>
                   <span style="color: #F0483D;font-size: 26px;" v-show="this.radio2==3">
                    {{ blog.price3 }}
                   </span>
                   <span style="color: #F0483D;font-size: 26px;" v-show="this.radio2==4">
                    {{ blog.price4 }}
                   </span>
                   <span style="color: #F0483D;font-size: 26px;" v-show="this.radio2==5">
                    {{ blog.price5 }}
                   </span>
                   <span style="color: #F0483D;font-size: 26px;" v-show="this.radio2==6">
                    {{ blog.price6 }}
                   </span>
                   <span style="font-size: 12px;" v-show="this.radio2==1">(约0元/次)</span>
                   <span style="font-size: 12px;" v-show="this.radio2==2">(约0.1元/次)</span>
                   <span style="font-size: 12px;" v-show="this.radio2==3">(约0.08元/次)</span>
                   <span style="font-size: 12px;" v-show="this.radio2==4">(约0.07元/次)</span>
                   <span style="font-size: 12px;" v-show="this.radio2==5">(约0.6元/次)</span>
                   <span style="font-size: 12px;" v-show="this.radio2==6">(约0.48元/次)</span>


                </p>
                <el-button type="primary">立即申请</el-button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'BlogPost',
    data() {
        return {
            radio2: '1',

        };
    },
    props: {
        blog: {},
        blogPostStyle: {
            type: String,
            default: 'card'
        }
    }
}
</script>
<style scoped>
.beixuan {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
}

.el-radio--medium.is-bordered {
    /* margin-left: 10px; */
    margin-top: 10px;
}
.el-button--primary{
    background-color: #4985ED;
    border-color: #4985ED;
}
::v-deep .el-radio__input {
  display: none ;
}
::v-deep .el-radio__label{
padding-left: 0px;
}
::v-deep .el-radio{
    margin-right: 5px;
}
.el-radio.is-bordered+.el-radio.is-bordered{
    margin-left: 0px;
}

.blogTwo_left{
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
}
.blogTwo_left_yuan{
    width: 150px;
    height: 150px;
    background-color: #d9e0ed;
    border-radius: 50%;
    /* display: flex;
    justify-items: center;
    align-items: center; */
    line-height: 150px;
    text-align: center;
}

</style>